<template>
  <div class="example-container">
    <h2>🧮 computed() - 计算属性</h2>
    
    <div class="demo-section">
      <h3>魔法计算器</h3>
      <div class="calculator">
        <div class="input-section">
          <label for="num1">数字 1:</label>
          <input id="num1" v-model.number="num1" type="number" />
        </div>
        <div class="input-section">
          <label for="num2">数字 2:</label>
          <input id="num2" v-model.number="num2" type="number" />
        </div>
        
        <div class="result-section">
          <div class="result-item">
            <span class="operation">加法 (+):</span>
            <span class="result">{{ sum }}</span>
          </div>
          <div class="result-item">
            <span class="operation">减法 (-):</span>
            <span class="result">{{ difference }}</span>
          </div>
          <div class="result-item">
            <span class="operation">乘法 (×):</span>
            <span class="result">{{ product }}</span>
          </div>
          <div class="result-item">
            <span class="operation">除法 (÷):</span>
            <span class="result">{{ division }}</span>
          </div>
          <div class="result-item">
            <span class="operation">最大值:</span>
            <span class="result">{{ maxValue }}</span>
          </div>
          <div class="result-item">
            <span class="operation">平均值:</span>
            <span class="result">{{ average }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>购物车示例</h3>
      <div class="cart">
        <div class="cart-items">
          <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
            <div class="item-info">
              <span class="item-name">{{ item.name }}</span>
              <span class="item-price">¥{{ item.price }}</span>
            </div>
            <div class="item-controls">
              <button @click="decreaseQuantity(index)" class="quantity-btn">-</button>
              <span class="quantity">{{ item.quantity }}</span>
              <button @click="increaseQuantity(index)" class="quantity-btn">+</button>
            </div>
          </div>
        </div>
        
        <div class="cart-summary">
          <div class="summary-item">
            <span>商品总数:</span>
            <span class="highlight">{{ totalItems }}</span>
          </div>
          <div class="summary-item">
            <span>小计:</span>
            <span class="highlight">¥{{ subtotal }}</span>
          </div>
          <div class="summary-item">
            <span>折扣:</span>
            <span class="highlight">-¥{{ discount }}</span>
          </div>
          <div class="summary-item total">
            <span>总计:</span>
            <span class="highlight total-price">¥{{ total }}</span>
          </div>
          <div v-if="discount > 0" class="discount-message">
            ✨ 获得折扣: {{ discountPercentage }}% 优惠！
          </div>
        </div>
      </div>
    </div>
    
    <div class="code-section">
      <h3>📝 代码说明</h3>
      <p><strong>computed()</strong> 用于创建基于其他响应式数据计算得出的属性。</p>
      <p>计算属性具有<strong>缓存机制</strong>，只有当依赖的数据发生变化时才会重新计算。</p>
      <p>非常适合处理需要根据多个数据进行计算的场景，使代码更简洁、更高效。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 计算器示例
const num1 = ref<number>(10);
const num2 = ref<number>(5);

// 计算属性 - 基础运算
const sum = computed(() => num1.value + num2.value);
const difference = computed(() => num1.value - num2.value);
const product = computed(() => num1.value * num2.value);
const division = computed(() => {
  return num2.value === 0 ? '除数不能为零' : (num1.value / num2.value).toFixed(2);
});
const maxValue = computed(() => Math.max(num1.value, num2.value));
const average = computed(() => (num1.value + num2.value) / 2);

// 购物车示例
interface CartItem {
  name: string;
  price: number;
  quantity: number;
}

const cartItems = ref<CartItem[]>([
  { name: 'Vue 3 入门书籍', price: 89, quantity: 1 },
  { name: '前端开发鼠标垫', price: 29, quantity: 2 },
  { name: '程序员保温杯', price: 59, quantity: 1 }
]);

// 计算属性 - 购物车统计
const totalItems = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0);
});

const subtotal = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0);
});

const discountPercentage = computed(() => {
  // 满200减20%，满500减30%
  if (subtotal.value >= 500) return 30;
  if (subtotal.value >= 200) return 20;
  return 0;
});

const discount = computed(() => {
  return (subtotal.value * discountPercentage.value) / 100;
});

const total = computed(() => {
  return subtotal.value - discount.value;
});

// 方法
const increaseQuantity = (index: number) => {
  cartItems.value[index].quantity++;
};

const decreaseQuantity = (index: number) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity--;
  }
};
</script>

<style scoped>
.example-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.calculator {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 25px;
  border-radius: 15px;
  color: white;
}

.input-section {
  margin-bottom: 20px;
}

.input-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.input-section input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.result-section {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.result-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.operation {
  font-weight: bold;
}

.result {
  font-size: 18px;
  font-weight: bold;
  color: #ffeb3b;
}

.cart {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cart-items {
  margin-bottom: 30px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.item-name {
  font-weight: bold;
}

.item-price {
  color: #e74c3c;
  font-weight: bold;
}

.item-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: #3498db;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.quantity-btn:hover {
  background-color: #2980b9;
}

.quantity {
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

.cart-summary {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #2ecc71;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
}

.summary-item.total {
  font-weight: bold;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.highlight {
  font-weight: bold;
  color: #2c3e50;
}

.total-price {
  color: #e74c3c;
  font-size: 20px;
}

.discount-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #d5f5e3;
  color: #27ae60;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

.code-section {
  background-color: #f0f4f8;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #4285f4;
}

.code-section h3 {
  color: #333;
  margin-top: 0;
}

.code-section p {
  line-height: 1.6;
  color: #555;
}

.code-section code {
  background-color: #e8eaed;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #d32f2f;
}
</style>